<template>
  <div>
    <div>
      <span>选择额度：</span>
      <el-radio-group v-model="recharge" @input="changeRecharge">
        <el-radio-button v-for="(val, key , i) in tc" :label="key">{{ zeroTwo(val[0]) + '（送' + zeroTwo(val[1]) + ')' }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div id="qr" v-loading="loading">
      <p style="color:#1890ff">实际得{{ zeroTwo(tc[recharge][0] + tc[recharge][1]) }}</p>
      <img v-show="!payed" id="qrcode" :src="qrImg">
      <h1 v-show="payed">支付成功！</h1>
      <p style="color:#04BE02" v-show="!payed">请微信扫码支付{{ zeroTwo(tc[recharge][0]) }}元</p>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  import {applyPayOrder, lunxunOrder} from "@/api/system/recharge"

  export default {
    name: "pay",
    data() {
      return {
        loading: false,
        recharge: 'tc1',
        tc: {
          tc1: [300, 5],
          tc2: [500, 10],
          tc3: [800, 30],
          tc4: [1000, 50]
        },
        qrImg: null,
        outTradeNo: null,
        intervalwx: null,
        payed: false
      }
    },
    created() {
      this.refreshPay()
    },
    beforeDestroy() {
      this.cancel()
    },
    methods: {
      refreshPay() {
        // 请求支付短链接
        this.loading = true
        this.payed = false
        let item = this.tc[this.recharge]
        applyPayOrder({
          totalFee: item[0],
          recharge: item[0] + item[1]
        }).then(res => {
          if (res.code == 200) {
            this.outTradeNo = res.data.outTradeNo
            let payUrl = res.data.payUrl
            // 渲染二维码
            console.log('---payUrl---', payUrl)
            QRCode.toDataURL(payUrl, (err, qrCodeData) => {
              if (err) console.error(err)
              this.qrImg = qrCodeData
              this.loading = false
            })
            // 启动轮询
            this.intervalwx = window.setInterval(() => {
              let _this = this
              lunxunOrder(this.outTradeNo).then(res => {
                if (res.msg == 'ok') {
                  _this.$modal.alertSuccess("充值成功")
                  this.cancel()
                }
              })
            }, 1500)
          }
        })
      },
      changeRecharge() {
        this.cancel()
        this.refreshPay()
      },
      cancel() {
        this.payed = true
        clearInterval(this.intervalwx)
        this.intervalwx = undefined
      }
    }
  };
</script>

<style lang="scss">

  #qr {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;

    img {
      width: 200px;
      height: 200px;
    }

    p {
      margin: 6px 0;
      font-size: 14px;
    }

    h1 {
      text-align: center;
      height: 160px;
      padding-top: 70px
    }
  }

  .el-dialog__body {
    padding: 10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-radio-button--medium .el-radio-button__inner {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 0;
  }

</style>


